<template>
  <div class="my">
    <nav-bar pageName='个人中心'
             :isBack='false'>
    </nav-bar>
    <div class="my-content">
      <!-- 头像区域 -->
      <div class="my-content-header">
        <img src="@img/avater.png"
             class="my-content-header-avater">
        <p class="my-content-header-login"
           @click="onLoginClick">登录/注册</p>
      </div>
      <div class="my-content-tools">
        <div v-for="(item,index) in toolData"
             :key="index"
             class="my-content-tools-item">
          <p class="my-content-tools-item-name">{{item}}</p>
          <img src="@img/right-arrow.svg"
               class="my-content-tools-item-arrow">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import NavBar from '@c/currency/NavigationBar.vue'
export default {
  components: {
    NavBar
  },
  data () {
    return {
      toolData: [
        '全部订单',
        '我的预约',
        '应用推荐',
        '用户福利'
      ]
    }
  },
  methods: {
    onLoginClick () {
      this.$router.push({
        name: 'login',
        params: {
          routerType: 'push'
        }
      })
    }
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable.scss";
.my {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: $bgColor;
  &-content {
    height: 100%;
    width: 100%;
    &-header {
      margin-top: px2rem($marginSize);
      background: white;
      height: px2rem(68);
      display: flex;
      align-items: center;
      border-top: px2rem(1) solid $lineColor;
      padding: px2rem($marginSize);
      &-avater {
        width: px2rem(52);
        height: px2rem(52);
      }
      &-login {
        margin-left: px2rem($marginSize);
        font-size: px2rem($titleSize);
      }
    }
    &-tools {
      &-item {
        display: flex;
        height: px2rem(46);
        box-sizing: border-box;
        align-items: center;
        padding: px2rem($marginSize);
        background: white;
        border-bottom: px2rem(1) solid $lineColor;
        &-name {
          font-size: px2rem($infoSize);
          flex-grow: 1;
        }
        &-arrow {
          width: px2rem(16);
        }
      }
    }
  }
}
</style>